<template>
    <add-project ref="addProjectRef"/>
    <n-switch
        :rail-style="railStyle"
        checked-value="enable"
        unchecked-value="disable"
        v-model:value="isEnable"
    >
        <template #checked>
            查看启用
        </template>
        <template #unchecked>
            查看停用
        </template>
    </n-switch>
    <n-data-table
        :key="tableKey"
        :columns="taskColumns.columns"
        :data="superAdmin.taskQuestionBank[isEnable]"
        :row-key="rowKey"
        :default-expanded-row-keys="expanded_row_keys"

        @update:checked-row-keys="handleCheck"
    />
    <!--  新增任务模态框-->
    <add-task-modal ref="addTaskModalRef" :set-key="setAddTaskModalKey" :key="addTaskModalKey"/>
</template>

<script setup>

import {useSuperAdminStore} from "@/stores/superAdmin";
import workApi from "@/http/workApi";
import AddProject from "@/components/superAdmin/新建模态框/AddProject.vue";
import AddTaskModal from "@/components/superAdmin/新建模态框/AddTaskModal.vue";
import {useDialog} from "naive-ui";
import {taskColumns} from "@/views/superAdmin/taskColumns";

const addProjectRef = ref(null)
const dialog = useDialog()
const addTaskModalRef = ref(null)
const tableKey = ref(1)
const superAdmin = useSuperAdminStore()
// 当前是否启用
let isEnable = ref('enable')
let railStyle = ({focused, checked}) => {
    const style = {};
    if (checked) {
        style.background = "#2080f0";
        if (focused) {
            style.boxShadow = "0 0 0 2px #2080f040";
        }
    } else {
        style.background = "#d03050";
        if (focused) {
            style.boxShadow = "0 0 0 2px #d0305040";
        }
    }
    return style;
}
const expanded_row_keys = computed(()=>{
    let array = []
    for (let i of superAdmin.taskQuestionBank[isEnable.value]) {
        array.push(i.id)
    }
    tableKey.value ++
    return array
})
const rowKey = (row) => {
    if ('project_id' in row) {
        return row.name
    }

    return row.id;
}
// 选中项目
let checkedRowKeys = ref([])
let checkedRowKey = ref({
    type: null,
    id: null,
    name: null,
    describe: null,
})
let handleCheck = (rowKeys) => {
    checkedRowKeys.value = rowKeys;
}
// 操作
const details = (row) => { // 详细
    window.$message.warning('@详细: ' + row.name)
}
const edit = (row) => { // 修改
    if (row.type === '项目') {
        // `修改项目`继续使用`新增项目`vue组件
        addProjectRef.value.openModifiedProject(row.id, row.name, row.describe)
    } else {
        addTaskModalRef.value.openModifiedTask(row)
    }
}
const del = (row) => { // 删除
    const url = 'super_admin/' + (row.type === '项目' ? 'project' : 'task')
    const id = row.type === '项目' ? row.id : row['task_id']
    dialog.warning({
        title: '删除',
        content: '你确定？',
        positiveText: '确定',
        negativeText: '不确定',
        onPositiveClick: () => {
            workApi.delete(url, {
                data: {
                    ids: [id]
                }
            }).then((res) => {
                console.log(res)
                superAdmin.updateTaskQuestionBank()
            })
        },
    })

}
const deactivate = (row) => { // 停用
    console.log(row)
    workApi.post('super_admin/task_disable', {
        ids: [row.task_id],
        disable: !(isEnable.value === 'enable')
    }).then(() => {
        superAdmin.updateTaskQuestionBank()
    })
}
const add = (row) => { // 新增任务
    addTaskModalRef.value.setShowModal(row.id)
}

const operation = {
    details,
    edit,
    del,
    deactivate,
    add
}
taskColumns.operation = operation


// 设置新增任务组件的key
const addTaskModalKey = ref(0)
// 改变key使得组件重新渲染
const setAddTaskModalKey = () => {
    addTaskModalKey.value++
}

</script>

<style lang="less">

</style>